﻿@model Zatify.WebUI.Admin.Models.BusinessCategoriesViewModel
@{
    ViewBag.Title = "Business Categories";
    Layout = "~/Areas/Admin/Views/Shared/_AdminLayout.cshtml";
}
@section Styles
{
    <style type="text/css">
        .zatify_panel_btn form
        {
            display: inline;
        }
        .add_new_user_form
        {
            width: auto;
        }
        #tree ul.dynatree-container
        {
            height: 160px;
            overflow: scroll;
        }
    </style>
}
@section Scripts
{
    @*<script src="@Url.Content("~/Scripts/jquery.cookie.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.treeview.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/demo.js")" type="text/javascript"></script>*@
    <script type="text/javascript" src="@Url.Content("~/Scripts/dynatree-1.2.2/jquery/jquery.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/dynatree-1.2.2/jquery/jquery-ui.custom.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/dynatree-1.2.2/jquery/jquery.cookie.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/dynatree-1.2.2/dist/jquery.dynatree.min.js")"></script>
    <script type="text/javascript">

        var blockCategoriesTreeView;

        $(document).ready(function () {

            blockCategoriesTreeView = $("#blockCategoriesTreeView");

            var hiddenCategoriesIds = $("#categoriesIds");

            $("#tree").dynatree({
                onSelect: function (flag, dtnode) {
                    // This will happen each time a check box is selected/deselected
                    selectedNodes = dtnode.tree.getSelectedNodes();
                    selectedKeys = $.map(selectedNodes, function (node) {

                        if (node.data.isSelectable === 'True')
                            return node.data.key;
                    });

                    hiddenCategoriesIds.val(selectedKeys.join(","));
                },
                onRender: function (node, nodeSpan) {
                    if (node.data.isSelectable === 'False')
                    $(nodeSpan).find(".dynatree-checkbox").remove();
                },
                //selectMode: 2,
                checkbox: true,
                classNames: { nodeIcon: "" }
            });

        });

        var removingCatsIds = [];

        function addRemovingCategory(e, id) {

            var hiddenRemovingCategoriesIds = $("#removingCategoriesIds");

            if ($(e).attr("checked")) {

                removingCatsIds.push(id);
                hiddenRemovingCategoriesIds.val(removingCatsIds.join(","));
            }
            else {

                removingCatsIds = jQuery.grep(removingCatsIds, function (value) {
                    return value != id;
                });

                hiddenRemovingCategoriesIds.val(removingCatsIds.join(","));
            }
        }

        function showBlockCategoriesTreeView() {

            blockCategoriesTreeView.slideToggle("slow");
        }


    </script>
}
@helper OrgTree(Zatify.Domain.Data.Category cat)
    {
        if (cat.ParentId > 0)
        { 
    @cat.CategoryName<text> &lt; </text>@OrgTree(Model.AllCategories.FirstOrDefault(c => c.CategoryId == cat.ParentId));
        }
        else
        {
    @cat.CategoryName
        }
}
<!--start bradecums-->
<div class="bradecums_bar">
    Business Profile Screens <span>&raquo;</span> @Model.BusinessName <span>&raquo;</span>
    Categories</div>
<!--end bradecums-->
<!--start button-->
<div class="zatify_panel_btn2">
    @Html.Partial("Partials/BusinessDetailsTabsControl", new BusinessDetailsTabsViewModel() { BusinessId = @Model.BusinessId, BusinessSection = BusinessSection.Categories })
    <div class="clearfix">
    </div>
</div>
<!--end button-->
<!--start add new part-->
<div class="add_new_zatify_user" style="border-top: 1px solid #d9dfe4;">
    <div class="business_profile_screens_form_border">
        @foreach (var category in Model.BusinessCategories)
        {
            <div class="business_hour_line">
                <label class="business_categories_label_text">
                    <input type="checkbox" onchange="addRemovingCategory(this, @category.CategoryId)" class="chkBusinessCategory business_hour_checkbox" />
                    <span class="business_categories_checkbox_text">
                        @OrgTree(category)
                    </span>
                </label>
            </div>
            <div class="clearfix">
            </div>
        }
        <div style="margin-top: 10px;" class="zatify_panel_btn">
            <input type="image" src="@Url.Content("~/Areas/Admin/Content/zatify/Images/add_catagories_btn.jpg")" onclick="showBlockCategoriesTreeView()" name="" value="Add Catagories" />
            @using (Html.BeginForm("RemoveBusinessCategories", "Business"))
            {                
                @Html.HiddenFor(m => m.BusinessId)
                @Html.Hidden("removingCategoriesIds")
                <input type="image" src="@Url.Content("~/Areas/Admin/Content/zatify/Images/remove_btn.jpg")" name="" value="Remove Catagories" />
            }
        </div>
        <div id="blockCategoriesTreeView" class="categories_content" style="display: none">
            <fieldset style="margin-top: 15px;">
                <legend>
                    <h4>
                        Add New Categories</h4>
                </legend>
                <div class="add_new_user_form treeview_content_area">
                    <div class="categories_chain">
                        <div id="tree">
                            @Html.CategoryTree(Model.TopLevelCategories.ToList(), true, null)
                        </div>
                    </div>
                </div>
                <div class="zatify_panel_btn" style="margin-top: 10px; text-align: right;">
                    @using (Html.BeginForm("AddBusinessCategories", "Business"))
                    {
                        @Html.HiddenFor(m => m.BusinessId)
                        @Html.Hidden("categoriesIds")
                        <input name="" type="submit" class="btn apps_btn apps_gray_btn" value="Add Selected" />
                    }
                    <input name="" type="button" class="btn apps_btn apps_gray_btn" value="Cancle" onclick="showBlockCategoriesTreeView();" />
                </div>
            </fieldset>
        </div>
    </div>
    <div class="clearfix">
    </div>
    <div class="zatify_panel_btn" style="margin-top: 10px;">
        <a href="@Url.Action("BusinessCategoriesBack", "Business", new { id = Model.BusinessId })" style="text-decoration: none;">
            <input name="" type="button" class="btn apps_btn apps_gray_btn" value="<<Back" />
        </a><a href="@Url.Action("PaymentInfo", "Business", new { id = Model.BusinessId })" style="text-decoration: none;">
            <input name="" type="button" class="btn apps_btn apps_gray_btn" value="Next" />
        </a>
    </div>
</div>
<div class="clearfix">
</div>
<!--end add new part-->
